/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { init } from 'echarts';
import { IDEChart } from '@ibiz/model-core';
import { ref, PropType, onMounted, defineComponent } from 'vue';
import { IControlProvider } from '@ibiz-template/runtime';
import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
import { OdooChartController } from './odoo-chart.controller';
import {
  Bar,
  Pie,
  Line,
  Stacking,
  Ascending,
  Summation,
  Descending,
} from './icon';
import './odoo-chart.scss';

export const OdooChartControl = defineComponent({
  name: 'IBizOdooChartControl',
  props: {
    modelData: { type: Object as PropType<IDEChart>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
    provider: { type: Object as PropType<IControlProvider> },
    mdctrlActiveMode: { type: Number, default: undefined },
    loadDefault: { type: Boolean, default: true },
    isSimple: { type: Boolean, required: false },
    data: { type: Array<IData>, required: false },
  },
  setup() {
    const c = useControlController(
      (...args) => new OdooChartController(...args),
    );
    const ns = useNamespace(`odoo-chart`);
    const chartRef = ref<HTMLDivElement>();

    const echarts = [
      {
        type: 'bar',
        label: '柱状图',
        icon: Bar(),
      },
      {
        type: 'line',
        label: '条形图',
        icon: Line(),
      },
      {
        type: 'pie',
        label: '饼图',
        icon: Pie(),
      },
    ];

    const echartsActions = [
      {
        types: ['bar', 'line'],
        label: '堆叠',
        icon: Stacking(),
        selected: () => c.state.stacked,
        onClick: () => {
          c.state.stacked = !c.state.stacked;
          c.calcSeriesesOption();
        },
      },
      {
        types: ['line'],
        label: '累加',
        icon: Summation(),
        selected: () => c.state.cumulative,
        onClick: () => {
          c.state.cumulative = !c.state.cumulative;
          if (c.state.cumulative) c.state.chartSort = undefined;
          c.calcSeriesesOption();
        },
      },
    ];

    const echartsSort = [
      {
        types: ['bar', 'line'],
        label: '降序',
        icon: Descending(),
        selected: () => c.state.chartSort === 'Descending',
        onClick: () => {
          c.state.chartSort =
            c.state.chartSort === 'Descending' ? undefined : 'Descending';
          if (c.state.chartSort) c.state.cumulative = false;
          c.calcSeriesesOption();
        },
      },
      {
        types: ['bar', 'line'],
        label: '升序',
        icon: Ascending(),
        selected: () => c.state.chartSort === 'Ascending',
        onClick: () => {
          c.state.chartSort =
            c.state.chartSort === 'Ascending' ? undefined : 'Ascending';
          if (c.state.chartSort) c.state.cumulative = false;
          c.calcSeriesesOption();
        },
      },
    ];

    onMounted(() => {
      const chart = init(chartRef.value);
      c.initChart(chart);
    });

    /**
     * @description 绘制测量
     * @returns {*}
     */
    const renderSurvey = () => {
      return (
        <el-dropdown
          trigger='click'
          max-height={300}
          popper-class={ns.em('survey', 'popper')}
          onCommand={(val: string) => c.onSurveyChange(val)}
          popper-options={{
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, 5],
                },
              },
            ],
          }}
        >
          {{
            default: () => {
              return (
                <el-button type='primary' class={ns.e('survey')}>
                  <div class={ns.em('survey', 'caption')}>测量</div>
                  <ion-icon
                    class={ns.em('survey', 'icon')}
                    name='caret-down-outline'
                  ></ion-icon>
                </el-button>
              );
            },
            dropdown: () => {
              return (
                <el-dropdown-menu>
                  {c.state.surveys.map(item => {
                    return (
                      <el-dropdown-item
                        command={item.value}
                        class={[
                          ns.em('survey', 'item'),
                          ns.is(
                            'selected',
                            c.state.selectSurvey === item.value,
                          ),
                        ]}
                      >
                        {item.label}
                      </el-dropdown-item>
                    );
                  })}
                </el-dropdown-menu>
              );
            },
          }}
        </el-dropdown>
      );
    };

    /**
     * @description 绘制序列
     * @returns {*}
     */
    const renderSeries = () => {
      return (
        <div class={ns.e('btn-group')}>
          {c.state.dechartSerieses.map(item => {
            const chart = echarts.find(e => e.type === item.echartsType);
            if (chart)
              return (
                <div
                  title={chart.label}
                  class={[
                    ns.em('btn-group', 'btn'),
                    ns.is('selected', c.state.selectSeries.id === item.id),
                  ]}
                  onClick={() => c.onSeriesChange(item)}
                >
                  {chart.icon}
                </div>
              );
            return null;
          })}
        </div>
      );
    };

    /**
     * @description 绘制行为
     * @returns {*}
     */
    const renderAction = () => {
      return (
        <div class={ns.e('btn-group')}>
          {echartsActions.map(item => {
            if (
              c.state.selectSeries.echartsType &&
              item.types.includes(c.state.selectSeries.echartsType)
            )
              return (
                <div
                  title={item.label}
                  class={[
                    ns.em('btn-group', 'btn'),
                    ns.is('selected', item.selected()),
                  ]}
                  onClick={() => item.onClick()}
                >
                  {item.icon}
                </div>
              );
            return null;
          })}
        </div>
      );
    };

    const renderSort = () => {
      return (
        <div class={ns.e('btn-group')}>
          {echartsSort.map(item => {
            if (
              c.state.selectSeries.echartsType &&
              item.types.includes(c.state.selectSeries.echartsType)
            )
              return (
                <div
                  title={item.label}
                  class={[
                    ns.em('btn-group', 'btn'),
                    ns.is('selected', item.selected()),
                  ]}
                  onClick={() => item.onClick()}
                >
                  {item.icon}
                </div>
              );
            return null;
          })}
        </div>
      );
    };

    return {
      c,
      ns,
      chartRef,
      renderSurvey,
      renderSeries,
      renderAction,
      renderSort,
    };
  },
  render() {
    return (
      <iBizControlBase controller={this.c} class={this.ns.b()}>
        <div class={this.ns.e('header')}>
          {this.renderSurvey()}
          {this.renderSeries()}
          {this.renderAction()}
          {this.renderSort()}
        </div>
        <div ref='chartRef' class={this.ns.e('chart')}></div>
      </iBizControlBase>
    );
  },
});
